<template>
	<view class="page">
		<!-- 自定义头部 start -->
		<fu-custom bgColor="bg-white" :isBack="false">
			<block slot="content">{{i18n['授权登录']}}</block>
		</fu-custom>
		<!-- 自定义头部 -->
		<view>
			<view class="header">
				<image src="/static/logo.png"></image>
			</view>
			<!-- 选择性别 -->
			<!-- <view class="text-center padding-bottom-48 fu-fs32" @tap="toggleTab('selector','性别选择')">{{sex ? sex : '选择性别'}}</view> -->
			<view class="cu-form-group flex align-center justify-between">
				<view class="title">昵称</view>
				<input type="nickname" class="inputTextRight" placeholder="请输入昵称" v-model="nickName" placeholder-style="color:#BFBFBF"/>
			</view>
			<view class="cu-form-group">
				<view class="title">性别</view>
				<input style="text-align: right;" class="inputTextRight" type="text"
					@tap="toggleTab('selector','性别选择')" v-model="sex" disabled="ture"
					placeholder-style="color:#BFBFBF" placeholder="请选择" />
				<image style="width: 16rpx;height: 28rpx;" src="http://meidaojia.zztczg.cn/mini/static/ricon.png"
					mode=""></image>
			</view>
			<!-- <view class="content">
				<view>{{i18n['申请获取以下权限']}}</view>
				<text>{{i18n['获得你的手机号码信息']}}</text>
			</view> -->
			<button class="bottom bg-green" type="primary" open-type="getPhoneNumber" withCredentials="true"
				lang="zh_CN" @getphonenumber="getPhoneNumber" style="background:#FF6F27;">
				{{ i18n['绑定手机号']}}
			</button>
		</view>
		
		
		<fu-popup v-model="isShow1" mode="center" :maskClick="true" >
			<view class="ts-box flex flex-direction  justify-between align-center" >
				<view class="text-bold" style="font-size: 40rpx;margin-bottom: 40rpx;">
					提示
				</view>
				<text class="text-666">{{msg}}</text>
				<view class="tc-btn" @click="cancle">
					我知道了
				</view>
			</view>
		</fu-popup>
		<fu-popup v-model="isShow2" mode="center" :maskClick="true" >
			<view class="ts-box flex flex-direction  justify-between align-center" >
				<view class="text-bold" style="font-size: 40rpx;margin-bottom: 40rpx;">
					提示
				</view>
				<text class="text-666">{{msg}}</text>
				<view class="tc-btn" @click="kt">
					去开通
				</view>
			</view>
		</fu-popup>
		<fu-popup v-model="isShow" mode="center" :maskClick="false">
			<view class="ts-box flex flex-direction  justify-between align-center" >
				
				<text class="text-666">{{msg}}</text>
				
			</view>
		</fu-popup>
		<!-- 选择性别 start -->
		<w-picker mode="selector" :options="checkArr" themeColor="#FF6F27" @confirm="onConfirm($event,'selector')"
			:headline="headline" :value='sex' ref="selector"></w-picker>
		<!-- 选择性别 end -->
	</view>
</template>

<script>
	import {
		SYSTEM_CONFIG
	} from '@/common/config.js';
	import wPicker from "../../components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				code: '',
				user_sn: '',
				msg:'',
				isShow1:false,
				isShow2:false,
				isShow:false,
				checkArr: [{
					label: '男',
					value: "1"
				}, {
					label: '女',
					value: "2"
				}],
				headline: '', //给w-picker传个标题
				sex: '',
				gender: 0,
				nickName: ''
			};
		},
		onLoad() {
			
			if (uni.getStorageSync('COMMONINVITECODESYNC')) {
				this.user_sn = uni.getStorageSync('COMMONINVITECODESYNC');
				
				
				
			}
			
			console.log(this.user_sn,'===================this.user_sn')
		},
		methods: {
			kt(){
				uni.redirectTo({
					url:'/pages/member/vip/vip/index'
				})
			},
			// 取消登录
			cancle() {
				uni.navigateBack();
			},
			toggleTab(mode, headline) {
				this.headline = headline
				this.$refs[mode].show();
			},
			onConfirm(result, type) {
				if (type == 'selector') {
					this.sex = result.result
					this.gender = result.value
				}
			},
			// 获取手机号
			getPhoneNumber(e) {
				// 用户取消授权,返回上一页
				// 用户同意授权,调用登录方法
				if (e.detail.errMsg.indexOf('user deny') !== -1) {
					uni.navigateBack();
				} else {
					this.bindMoblile(e.detail.encryptedData, e.detail.iv);
				}
			},
			// 绑定手机号
			bindMoblile(encryptedData, iv) {
				if(!this.nickName){
					this.$message.info('请输入昵称');
					return
				}
				uni.showLoading({
					title: this.i18n['绑定中...']
				});
				// 获取用户授权信息
				uni.login({
					success: res => {
						/* 用户信息发给后台 */
						let Wxinfo_tmp = uni.getStorageSync('Wxinfo_tmp')
						Wxinfo_tmp.gender = this.gender
						Wxinfo_tmp.nickName = this.nickName
						
						let data = {
								encryptedData: encodeURIComponent(encryptedData),
								iv: encodeURIComponent(iv),
								code: res.code,
								wxinfo: JSON.stringify(Wxinfo_tmp),
								user_source: SYSTEM_CONFIG.platform,
								invite_code: this.user_sn
							}
						console.log('注册参数====',data);
						this.$api
							.post(global.apiUrls.postMiniparamMobile, data)
							.then(res => {
								console.log('注册成功===',res);
								res = res.data;
								uni.hideLoading();
								if (res.code == 1) {
									uni.removeStorageSync('Wxinfo_tmp');
									// 保存用户信息到 store 中
									this.$store.commit('updateUserInfo', res.data.userinfo);
									this.msg = res.msg
									// this.isShow2 = true
									
									
									uni.navigateBack();
								} else {
									//-2 第一位注册邀请用户  -1邀请人数已达上限  1是否去开通会员 
									this.msg = res.msg
									if(res.code == -2){
										// this.$message.info(res.msg);
										this.$store.commit('updateUserInfo', res.data.userinfo);
										this.isShow = true
									
										setTimeout(()=>{
											this.isShow = false
											uni.navigateBack(
											
											)
										},1000)
									}else if(res.code== '-1'){
										// this.$store.commit('updateUserInfo', res.data.userinfo);
										this.isShow1 = true
									}else{
										this.$message.info(res.msg);
									}
								}
							})
							.catch(err => {
								uni.hideLoading();
								console.log('ERROR', err);
							});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #fff;
	}

	.header {
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}
	.ts-box{
		padding: 44rpx;
		width: 510rpx;
		// height: 424px;
		background: #FFFFFF;
		border-radius: 24rpx;
		opacity: 1;
	}
	.tc-btn{
		width: 308rpx;
		height: 80rpx;
		background: #B82441;
		border-radius: 44rpx;
		text-align: center;
		line-height: 80rpx;
		opacity: 1;
		color: #ffffff;
		margin-top: 48rpx;
	}
	.cu-form-group {
		margin: 0 50rpx 32rpx;
		// border-bottom: 1rpx solid #eee;
		border-top: 0 !important;
		padding: 0 !important;
	}
	
</style>
